<template>
	<view class="extend">
		<view class="bgc">

		</view>

		<!-- 提现金额 -->
		<view class="info">
			<view class="ke_money">
				<text>可提现:</text>
				<text style="color:#0D7EFC;">￥{{keMoney}}</text>
			</view>
			<view class="ti_money">
				<text>提现金额:</text>
				<input type="number" v-model="money" placeholder="请输入要提现的金额" />
			</view>
		</view>

		<!-- 提现方式 -->
		<view class="type">
			<view class="title">
				<text>提现方式</text>
			</view>
			<view class="collect_radio">
				<label class="radio" @click="radio('1')">
					<radio value="1" :checked="bianhao==='1'" color="#8d83fb" style="transform:scale(0.9)" @click="radio('1')" />微信支付</label>
				<label class="radio" @click="radio('2')">
					<radio value="2" :checked="bianhao==='2'" color="#8d83fb" style="transform:scale(0.9)" @click="radio('2')" />银行卡</label>
			</view>
			<view class="ipt" v-if="bianhao == 2">
				<input type="text" value="" placeholder="请输入姓名"/>
				<input type="text" value="" placeholder="请输入开户行名称/地址"/>
				<input type="number" value="" placeholder="请输入银行卡号"/>
			</view>
		</view>
		<button type="default" @click="submit">提交申请</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keMoney: 0.11, // 可提现金额
				money: '', // 提现金额
				bianhao: '1',
			}
		},
		onLoad(e) {
			this.keMoney = e.money
		},
		methods: {
			radio(id) {
				this.bianhao = id
				if (this.bianhao == 2) {
					console.log(this.bianhao)
				}
			},
			// 提交申请
			submit() {
				var that = this
				var data = {
					money: this.money
				}
				if (data.money == '') {
					this.$api.msg('请输入要提现的金额');
					return;
				}
				data.token = uni.getStorageSync('token');
				postInfoCash(data).then(res => {
					if (res.data.code == 1) {
						uni.showToast({
							title: res.data.msg,
							icon: "success",
						})
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)

					} else {
						this.$api.msg(res.data.msg);
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	page,
	.extend {
		width: 100%;
		height: 100%;
		color: #333;
	}

	.bgc {
		width: 100%;
		height: 200upx;
		background-color: #4c86ff;
	}

	.info {
		width: 92%;
		height: 200upx;
		position: absolute;
		top: 120upx;
		left: 4%;
		background-color: #fff;
		box-shadow: 5upx 5upx 5upx 5upx #999;
		border-radius: 20upx;
		font-size: 28upx;

		.ke_money,
		.ti_money {
			padding: 0 30upx;
			display: flex;
			height: 100upx;
			border-bottom: 1upx solid #F1f1f1;
			justify-content: space-between;
			line-height: 100upx;
		}

		.ti_money {
			border-bottom: none;

			text {
				width: 20%;
			}

			input {
				height: 100%;
				width: 75%;
			}
		}
	}

	.type {
		width: 92%;
		// height: 200upx;
		background-color: #fff;
		box-shadow: 5upx 5upx 5upx 5upx #999;
		border-radius: 20upx;
		font-size: 28upx;
		margin: 150upx auto 0;

		.title {
			padding: 0 30upx;
			height: 80upx;
			line-height: 80upx;
			border-bottom: 1upx solid #F1f1f1;
		}

		.collect_radio {
			margin-top: 10upx;
			padding: 0 30upx;
			display: flex;
			flex-direction: column;

			.radio {
				height: 80upx;
				line-height: 80upx;
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				margin-right: 20upx;
			}
		}

		.ipt {
			padding: 20upx 30upx;

			input {
				height: 60upx;
				line-height: 60upx;
				text-indent: 20upx;
				background-color: #f9f9f9;
				margin-bottom: 10upx;
			}
		}
	}

	button {
		width: 40%;
		height: 70upx;
		line-height: 32upx;
		font-size: 32upx;
		background-color: #8d83fb;
		border-radius: 35upx;
		color: #f1f1f1;
		line-height: 70upx;
		margin-top: 30upx;
	}
</style>
